<template>
  <div class="taskinfo">
    <div class="info">
      <p>标题：{{info.task_title}}</p>
      <p>剩余：{{info.task_wait}}份（<span style="color: red">仔细查看要求 页面底部领取操作</span>）</p>
      <p>佣金：{{info.agentprice}}</p>
      <p>开启时间：{{info.start_time}}</p>
      <p>结束时间：{{info.end_time}}</p>
      <p>注意事项：<span style="color: red">{{info.task_notice}}</span></p>
      <p>操作流程：{{info.task_content}}</p>
    </div>
    <div class="content">
      <h3>图文信息</h3>
      <div>
        <img
          :src="item"
          alt=""
          v-for="(item,index) in info.task_img"
          :key="index"
        >
      </div>
    </div>
    <!--<div class="submit">-->
        <!--<p  v-if="info.task_queue_status == 1" style="color: rgb(254,117,11);"><button>预热中</button></p>-->
        <!--<p  v-else-if="info.task_queue_status == 2" ><button>已领取</button></p>-->
        <!--<p  v-else-if="info.task_queue_status == 3" ><button @click="submit" >立即领取</button></p>-->
    <!--</div>-->
    <div class="foot">
      <!--<van-button round type="primary" disabled v-if="info.task_queue_status==2" >已接受任务</van-button>&nbsp;&nbsp;&nbsp;&nbsp;-->
      <van-button round plain size="small" type="primary" v-if="info.queueStatus==0" @click="submit" >接受任务</van-button>&nbsp;&nbsp;&nbsp;&nbsp;
      <van-button round plain size="small" type="primary" @click="taskCenter" ><van-icon name="wap-home" /> 返回首页</van-button>&nbsp;&nbsp;&nbsp;&nbsp;

    </div>

  </div>
</template>
<script>
import { taskInfo, taskReceive } from "../../api/user";
import Clipboard from "clipboard";
import { Toast } from "vant";
export default {
  data() {
    return {
      info: {}
    };
  },
  methods: {
    getData() {
      taskInfo({ task_id: this.$route.query.task_id }).then(res => {
        console.log(res.data);
        this.info = res.data;
      });
    },
    submit() {  //领取任务
      taskReceive({ task_id: this.$route.query.task_id }).then(res => {
        Toast(res.message);
        if(res.status==200){
          this.getData();
        }
      });
    },
    taskCenter(){
      this.$router.push({
        path: "/index",
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss">
.taskinfo {
  width: 100%;
  padding-bottom: 48px;
  background-color: #f5f5f5;
  header {
    color: #fff;
  }
  .info {
    margin: 5px;
    width: 96%;
    margin: 0 auto;
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 10px 5px;
    text-align: center;
    p {
      width: 100%;
      padding: 5px;
      text-align: left;
    }
    p:first-child {
      border-bottom: 1px solid #ddd;
    }
    p:nth-child(2) {
      border-bottom: 1px solid #eee;
    }
    button {
      color: #0909ff;
      border: 1px solid #0909ff;
      padding: 3px 15px;
      border-radius: 5px;
    }
  }
  .content {
    margin: 5px;
    width: 96%;
    margin: 0 auto;
    border: 1px solid #ddd;
    background-color: #fff;
    img {
      width: 100%;
    }
    h3 {
      width: 100%;
      padding: 15px;

      border: red;
      font-size: 16px;
      font-weight: 600;
    }
  }
  .foot{
    text-align: center;
    width: 90%;
    margin: 20px auto;
  }
  .submit {
    text-align: center;
    width: 90%;
    margin: 20px auto;
    button {
      width: 100%;
      height: 40px;
      background-color: #f71434;
      outline: none;
      border: none;
      border-radius: 5px;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>


